<template>
  <div class="songs-row">
      <div class="flex-jb">
        <span @click="playHot50">播放热门50</span>
        <span @click="gotoAllList">全部歌曲</span>
      </div>

      <playList :data="songs" :order="true" />

      <span class="all-info" @click="gotoAllList"> {{more ? '点我加载更多' : '已划到最底部了'}}</span>
  </div>
</template>

<script>
import api from '@/api'
import {musicMixin} from '@/utils/mixin.js';
import playList from '@/components/playlist/playlist.vue'

export default {
    components: {
        playList
    },
    mixins: [musicMixin],
    props: ['data'],
    watch: {
        data(n){
            if(n && n.artist){
                this.getSongsBySingerId(n.artist.id)
            }
        }
    },
    data(){
        return {
            songs: [],
            more: true
        }
    },
    methods: {
        getSongsBySingerId(id){
            if(!id) return;
            api.getSongsBySingerId(id).then(res =>{

                console.log(res);
                this.songs = this.songs.concat(res.data.hotSongs);
                this.more = res.data.more;
            })
        },

        playHot50(){
            this.setPlayList(this.songs);
            this.setPlayInfo(this.songs[0].id).then(res=>{
                this.playMusic();
            });
        },

        gotoAllList() {
            if(this.more){
                alert('相关页面还未开发')
            }
        }
    },
    created(){
        if(this.data){
            this.getSongsBySingerId(this.data.artist.id)
        }
    },
    mounted(){

        console.log('songs' , this.data)
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global.scss';
    .songs-row {
        padding: px2rem(10);
        background-color: #fff;

        .flex-jb {
            @include spaceBetween;
            align-items: center;
            * {
                font-weight: 500;
            }
        }

        .all-info {
            display: block;
            text-align: center;
            @include defaultFontSize;
            color: rgb(28, 146, 241);
            text-decoration:underline;
            text-decoration-color: rgb(28,146,241);
        }
    }
</style>